<!doctype html>
<html>
<head>
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="author" content="guo,1057540638@qq.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

<!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

<!--meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" -->
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- iOS 图标 begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<!-- iOS 图标 end -->

<!-- iOS 启动画面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="{{ asset('myhome/img/App-ios-logo-152x152.png') }}"/>
<!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="{{ asset('myhome/img/App-ios-logo-152x152.png') }}"/>
<!-- iPad 竖屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="{{ asset('myhome/img/App-ios-logo-152x152.png') }}"/>
<!-- iPad 横屏 1024x748（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="{{ asset('myhome/img/App-ios-logo-152x152.png') }}"/>
<!-- iPad 横屏 2048x1496（Retina） -->

<link rel="apple-touch-startup-image" href="{{ asset('myhome/img/App-ios-logo-152x152.png') }}"/>
<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="{{ asset('myhome/img/App-ios-logo-152x152.png') }}"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="{{ asset('myhome/img/App-ios-logo-152x152.png') }}"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<!-- iOS 启动画面 end -->

<!-- iOS 设备 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁贴图标 -->

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 订阅 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->
<!-- sns 社交标签 begin -->
<!-- 参考微博API -->
<meta property="og:type" content="类型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />
<!-- sns 社交标签 end -->
<title>提交订单</title>
<link rel="stylesheet" href="{{ asset('myhome/css/common.css') }}">
<link rel="stylesheet" href="{{ asset('myhome/css/font.css') }}">
<link rel="stylesheet" href="{{ asset('myhome/css/header.css') }}">
<link rel="stylesheet" href="{{ asset('myhome/css/footer.css') }}">
<link rel="stylesheet" href="{{ asset('myhome/css/index.css') }}">
<link rel="stylesheet" href="{{ asset('myhome/css/responsive.css') }}">
<link rel="stylesheet" href="{{asset('css/index.css')}}"/>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"> </script>
<style type="text/css">
  input[type="date"]:after {
    content: attr(placeholder);
    position: absolute;
    left: .15rem;
    color: rgba(0,0,0,.3);
  }
  input[type="time"]:after {
    content: attr(placeholder);
    position: absolute;
    left: .15rem;
    color: rgba(0,0,0,.3);
  }
</style> 
</head>

<body ontouchstart="return true;">

	<!--头部-->
	<header>
		<div class="header">
			<h1>提交订单</h1>
			<a onclick="history.go(-1);" class="return"><i></i></a>
		</div>
	</header>


	<!--内容区-->
	<article class="main-container add-product">
		<!--地址-->
		@if($cartrow!=null)
			@if(isset($cartrow[0]->sale))
				<form action="/home/user/order/insorder/{{ $cartrow[0]->id }}" id="myform" method="post">
			@else
				<form action="/home/user/order/insorder" id="myform" method="post">
			@endif

			<input type='hidden' name='_token' value='{{ csrf_token() }}'>
			<input type="hidden" name="store_id" value="1">
		<div class="order-Address line select " id="Edit-Address">
			@if($addrow != null)
				@foreach($addrow as $v)
					@if($v->status == 2)
						<input type="hidden" id="icon-head" value="1">
						<dl>
							<dt><i class="icon-head"></i>{{ $v->name }}<i class="icon-phone"></i>{{ $v->phone }}</dt>
							<dd>{{ $v->city }}{{ $v->detail }}</dd>
						</dl>
					@endif
				@endforeach
			@else
				<dl>
					<input type="hidden" id="icon-head" value="2">
					<dt><i id="icon-head" class="icon-head"></i>还没有地址，赶快添加一个吧!</dt>
				</dl>
			@endif
			<font class="icon-code"></font>
		</div>
		<!--添加地址-->
		<div class="order-add-address line hide" id="Add-Address">添加地址</div>

		<!--弹出管理地址层-->
		<div class="Edit-Address-Content fadeInBottom100" id="Edit-Address-Content">
			<div class="LayerHeader line">选择收货地址<button type="button" class="close pl"><i class="icon-plus rot45"></i></button><button type="button" class="head-r">添加</button></div>
			<ul class="line-li">
				@if($addrow != null)
					@foreach($addrow as $v)
						@if($v->status == 2)
							<li class="select"><span class="icon-correct"></span>{{ $v->name }}，{{ $v->phone }}<p>{{ $v->city }}{{ $v->detail }}</p></li>
							<input type="hidden" name="address" value="{{ $v->id }}">
						@else
						<li class="select" ><span onclick="location.href='{{ url('home/user/order/updatedizhi/'.$v->id) }}'" style="background: rgba(240, 240, 240, 1);border: 1px solid rgba(240, 240, 240, 1); " class="icon-error"></span>{{ $v->name }}，{{ $v->phone }}<p>{{ $v->city }}{{ $v->detail }}</p></li>
						@endif
					@endforeach
				@else
					<dl style="height: 7rem">
						<dt style="margin-top: 1rem;"><i class="icon-head"></i>还没有地址，赶快添加一个吧!</dt>
					</dl>
				@endif
			</ul>
		</div>

		
		<!--弹出添加地址层-->

		<div class="Add-Address-Content fadeInBottom100" id="Add-Address-Content">
			
			<div class="LayerHeader line">添加收货地址<button type="button" class="close pl"><i class="icon-plus rot45"></i></button><button type="button" onclick="demo();" class="head-r">保存</button></div>
			<input type='hidden' name='_token' value='{{ csrf_token() }}'>
			<div class="list list-title">
				<ul class="line">
					<li><i>收&nbsp;&nbsp;货&nbsp;&nbsp;人：</i><input type="text" id="name" name="name" placeholder="名字"></li>
					<li><i>联系电话：</i><input type="tel" id="phone" name="phone" placeholder="手机或固话"></li>
					<li class="list03"><i>所在地区：</i>
						<select name="select" class="cid" id="city">
							<option  selected="selected">请选择</option>
						</select>
					</li>
					<li><i>详情地址：</i><input type="text" id="name" name="detail" placeholder="街道门牌信息"></li>
				</ul>
			</div>
			
		</div>

		<!--已购产品-->
		<div class="list-content cartlist order-Pro">
			<ul>

				@foreach($cartrow as $vv)
					<li class="line">
						<a href="#"><div class="pro-img"><img src="{{ url('upload/product/'.$vv->preview) }}" alt=""></div></a>
						<div class="pro-con">
							<h3>{{ $vv->name }}</h3>
							<h6>{{ $vv->specifications }}</h6>
							<b style="margin-top: 30px" >{{ $vv->price }}<span style="float: right;">&times;{{ $vv->count }}</span></b>
						</div>
					</li>
				@endforeach


			</ul>
		</div>

		<!--优惠券-->
		<ul class="order-Coupon line">
			@if($cou == null)
				<li class="line" >优惠券<font>没有可用优惠券</font><span>未使用</span></li>
			@else
				<li class="line" onclick="docou();" >优惠券<font>{{ $cou->num }}张可用</font><span id="useCoupon">未使用</span><i class="icon-arrowright"></i></li>
			@endif
		</ul>

		{{--优惠券层--}}
		<div id="coupon" class="coupon-content" style="display: none;">
			<ul>
				<li class="cc-all tab_content show">
					<ul class="cc-one">
						@if($cou != null)
							@foreach($cou as $v)
								<li onclick="doAlter(this,{{ $v->id }},{{ $v->value }});">
									<div class="coupon-sum fl"><img src="{{url('img/cou-'.$v->value.'.jpg')}}"></div>
									<div class="coupon-text">{{$v->info}}<br>
										<span>有效期至：{{ date('Y-m-d',$v->end) }}</span>
										<div style="display:none;float: right;"><em class="icon-correct"></em></div>
									</div>
								</li>
							@endforeach
						@endif
					</ul>
					<input type="hidden" name="discount" value="0">
				</li>
			</ul>
		</div>


		<!--订单备注-->
		<div class="order-Remark line">
			<p>订单备注</p>
			<samp><textarea class="line-ora" name="remark" placeholder="限50个字以内"></textarea></samp>
		</div>
		
		<!--配送方式-->
		<div class="order-Delivery line" id="orderDelivery">
			<p>配送方式</p>
			<ol class="FilterContentList">
				<li><span class="select icon-correct">40分钟内送到</span></li>
			</ol>
			<dl class="order-Delivery-time line">
				<dt>选择商品配送时间</dt>
				<dd>
                    <input type="date" placeholder="配送日期" value="配送日期" >
                    <input type="time" placeholder="配送时间" value="配送时间" >
                </dd>
			</dl>
		</div>
		
		<!--支付方式-->
		<div class="order-Delivery line" id="orderPays" >
			<p>支付方式</p>
			<ol class="FilterContentList">
				<li><span class="select icon-correct">在线支付</span></li>
			</ol>
			<div class="list">
				<ul class="line">
					<li class="select"><i class="icon-weixinpay" style="background-color:#04c31c "></i>微信支付<em class="icon-correct"></em></li>
					<li><i 	class="icon-alipay" style="background-color:#3493ff "></i>支付宝支付<em class="icon-correct"></em></li>
				</ul>
			</div>
            <input type="hidden" name="paymethod" value="1">
		</div>
		
		<!--总金额-->

		<ul class="order-Total-Price line">
			<li><span >¥ {{ $sum }}</span>商品金额</li>
			<li><span id="discount">¥ 0</span>优惠金额</li>
			<li><span>¥ {{ $carriage = $sum >=20 ? 0:10 }}</span>运费</li>
		</ul>
		<br><br>
		</form>
	</article>
	<div style="margin-top: 5px"></div>
	<!--底部栏目-->
	<footer>
		<div class="button"><button onclick="doSubmit();" type="button" style="height: 2.5rem;" >提交订单</button></div>
		<h4 id="realpay">实付款：¥ {{ $realpay = $sum >= 20 ?$sum : $sum+10 }}</h4>
	</footer>

	@else
		<a href="{{ url('home/user/order/orderlist/8') }}"><p style="height: 50px;width: 60%;background-color:#ff585a;color: white;text-align: center;border-radius: 10px;line-height: 50px;margin: 100px auto ;"> 订单已提交查看订单</p></a>
	@endif
</body>
</html>
<script type="text/javascript" src="{{ asset('myhome/js/jquery-1.7.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('myhome/js/swipe-min.js') }}"></script>
<script type="text/javascript" src="{{ asset('myhome/js/common.js') }}"></script>
<script type="text/javascript">

    // 验证手机号
    function isPhoneNo(phone) {
        var pattern = /^1[34578]\d{9}$/;
        return pattern.test(phone);
    }
    //手机号
    $('#phone').focus(function(){
        $('#phone').attr('placeholder','手机号码');
        $('#phone').css('color','');
    }).blur(function(){
        var val = $('#phone').val();
        var bn = $('#phone');
        if(val == ''){
            bn.attr('placeholder','手机号码不能为空');
            bn.css('color','red');
        }else{
            if(isPhoneNo(val) == false){
                bn.val('');
                bn.attr('placeholder','手机号码不正确');
                bn.css('color','red');
            }
        }
    });

	function doSubmit() {
		var dd = $('#icon-head').val();
		if(dd == 1){
			$('#myform').submit();
		}else{
		    alert('还没有添加地址!');
		}
    }

	//弹出优惠券层
    function docou(){
        if($('#coupon').css('display') == 'none'){
            $('#coupon').css('display','');
		}else{
            $('#coupon').css('display','none');
		}
	}

	function doAlter(bn,id,value){
        if($(bn).children().eq(1).children('div').css('display') != 'none'){
            $(bn).children().eq(1).children('div').css('display','none');
            $('#useCoupon').html('未使用');
            $(bn).parent().next('input').val('0');
            var real = {{ $sum >= 20 ?$sum : $sum+10 }};
            $('#realpay').html('实付款：¥ '+ real);
            $('#discount').html('¥ 0');
        }else{
            var len = $('.cc-one').children().length;
            for(var i=0; i<len; i++){
                $('.cc-one').children().eq(i).children().eq(1).children('div').css('display','none');
            }
            $(bn).children().eq(1).children('div').css('display','');
            $('#useCoupon').html('已使用');
            $(bn).parent().next('input').val(id);
            var real = {{ $sum >= 20 ?$sum : $sum+10 }} - value;
            $('#realpay').html('实付款：¥ '+ real);
            $('#discount').html('¥ '+value);
        }
	}

	$(document).ready(function(){

		//支付方式
		$("#orderPays ol li").bind('click',function(){

			if($(this).index()==0){
				$("#orderPays ol li:nth-child(1) span").addClass("select icon-correct");
				$("#orderPays ol li:nth-child(2) span").removeClass();
				$("#orderPays ul").show();
                $('input[name=paymothod]').val('1');
			}else{
				$("#orderPays ol li:nth-child(1) span").removeClass();
				$("#orderPays ol li:nth-child(2) span").addClass("select icon-correct");
				$("#orderPays ul").hide();
				$('input[name=paymothod]').val('3');
			}
		});
		
		//支付方式
		var paymethod=1;
		$("#orderPays ul li").bind('click',function(){

			if($(this).index()==0){
				$("#orderPays ul li:nth-child(1)").addClass("select");
				$("#orderPays ul li:nth-child(2)").removeClass();
                $('input[name=paymothod]').val('1');
                paymethod=1;
			}else{
				$("#orderPays ul li:nth-child(1)").removeClass();
				$("#orderPays ul li:nth-child(2)").addClass("select");
                $('input[name=paymothod]').val('2');
                paymethod=2;
			}

		});
		
//		var o = document.getElementById('date');
//		o.onfocus = function(){
//        	this.removeAttribute('placeholder');
//    	};
//        o.onblur = function(){
//        	if(this.value == '') this.setAttribute('placeholder','配送日期');
//    	};
//    	var o = document.getElementById('time');
//    	o.onfocus = function(){
//        	this.removeAttribute('placeholder');
//    	};
//    	o.onblur = function(){
//    	    if(this.value == '') this.setAttribute('placeholder','配送时间');
//    	};
    
	});

	//城市级联
    var url = "{{ url('home/user/ajax/dizhi/city') }}";
    $.ajax({
        url:url,
        async:false,				//是否异步
        type:'post',					//请求方式
        data:{upid:0, '_token': $('input[name=_token]').val()},				//发送的数据
        dataType:'json',			//响应的数据类型
        success:function(data)		//成功时回调函数
        {
            for (var i = 0; i < data.length; i++) {
                $('.cid').append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
            };
        }
    });

    $("#city").live("change",function(){
        //先清除后面的select，再添加新的select
        $(this).nextAll("select").remove();
        //因为下面需要用到当前对象，但是是另一个函数体内，不能用$(this)
        var ob = $(this);

        //判断选择的是不是默认的请选择
        if($(this).val() != '请选择'){
            var upid = $(this).val();
            $.ajax({
                url:'{{ url("home/user/ajax/dizhi/xian") }}',
                async:false,				//是否异步
                type:'post',				//请求方式
                data:{upid:upid, '_token': $('input[name=_token]').val()},				//发送的数据
                dataType:'json',			//响应的数据类型
                success:function(data)		//成功时回调函数
                {
                    // console.log(data);
                    //判断是否还有数据返回
                    if(data.length>0){
                        //新建一个select标签
                        var select = $("<select id='xian'><option>请选择</option></select>");
                        //循环给select标签添加上option
                        for (var i = 0; i < data.length; i++) {
                            $(select).append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
                        };
                        //追加到前一个select后面
                        ob.after(select);
                    }
                }
            });
        }
    });

    function demo()
    {
        var name = $('input[name=name]').val();
        var phone = $('input[name=phone]').val();
        var detail = $('input[name=detail]').val();
        var city = $("#city").val();
        var xian = $("#xian").val();

        if(name == '' || phone == '' || detail == '' || city == '请选择' || xian == '请选择'){
            alert("请将信息填写完整!");
        }else{
            var dizhi = $('option[value='+city+']').html()+" "+ $('option[value='+xian+']').html();
            $.ajax({
                url:'{{ url("home/user/ajax/adddizhi") }}',
                async:false,				//是否异步
                type:'post',				//请求方式
                data:{name:name,phone:phone,detail:detail,dizhi:dizhi, '_token': $('input[name=_token]').val()},				//发送的数据
                dataType:'json',			//响应的数据类型
                success:function(data)		//成功时回调函数
                {
                    alert(data);
                    if(data == '地址添加成功!'){
                        location.href = "{{url('home/user/order/suborder') }}";
                    }
                }
            });
        }
    }


</script>